<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - {{ web_title }}</title>
    {% block stylesfirst %}{% endblock %}
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    {% block styles %}{% endblock %}
    <link rel="stylesheet" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="assets/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon">
</head>

<body>
    <div id="app">
        <div id="main" class="layout-horizontal">
            <header class="mb-5">
                <div class="header-top">
                    <div class="container">
                        <div class="logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo" srcset=""></a>
                        </div>
                        <div class="header-top-right">

                            <!-- Burger button responsive -->
                            <a href="#" class="burger-btn d-block d-xl-none">
                                <i class="bi bi-justify fs-3"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <nav class="main-navbar">
                    <div class="container">
                        <ul>
                            {% set maxSubmenuItemY = 8 %}
                            {% for menuItem in horizontalMenuItems %}
                            {% if not menuItem.isTitle %}
                            <li
                                class="menu-item {{ 'active' if (menuItem.url == filename or filename|startsWith(menuItem.key)) }} {{'has-sub' if menuItem.submenu.length > 0 }}">
                                <a href="{{menuItem.url if menuItem.url!==undefined else '#'}}" class='menu-link'>
                                    <i class="bi bi-{{ menuItem.icon }}"></i>
                                    <span>{{menuItem.name}}</span>
                                </a>{% if menuItem.submenu.length > 0 %}
                                <div
                                    class="submenu {{ 'active' if (sub.url and sub.url == filename or filename|startsWith(sidebarItem.key)) }}">
                                    <!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
                                    <div class="submenu-group-wrapper">
                                        {% for sub in menuItem.submenu %}
                                        {% if loop.index % maxSubmenuItemY == 1 %}
                                        <ul class="submenu-group">
                                            {% endif %}
                                            <li
                                                class="submenu-item {{ 'active' if sub.url == filename }} {{'has-sub' if sub.submenu.length > 0 }}">
                                                <a href="{{sub.url if sub.url!==undefined else '#'}}"
                                                    class='submenu-link'>{{ sub.name }}</a>

                                                {% if sub.submenu.length > 0 %}
                                                <!-- 3 Level Submenu -->
                                                <ul class="subsubmenu">
                                                    {% for subsub in sub.submenu %}
                                                    <li class="subsubmenu-item ">
                                                        <a href="{{ subsub.url }}" class="subsubmenu-link">{{
                                                            subsub.name }}</a>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                                {% endif %}
                                            </li>
                                            {% if loop.index % maxSubmenuItemY == 0 %}
                                        </ul>
                                        {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>{% endif %}
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </nav>

            </header>

            <div class="content-wrapper container">
                {% block content %}{% endblock %}
            </div>

            <footer>
                <div class="container">
                    <div class="footer clearfix mb-0 text-muted">
                        <div class="float-start">
                            <p>2021 &copy; Mazer</p>
                        </div>
                        <div class="float-end">
                            <p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
                                    href="http://ahmadsaugi.com">A. Saugi</a></p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    {% block js %}{% endblock %}
    <script src="assets/js/pages/horizontal-layout.js"></script>
</body>

</html>